<template>
  <div class="bigbox">
    <img src="../assets/3.png" alt="" />
    <div class="box1">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        :rules="rules"
        class="demo-form-inline"
      >
        <img src="../assets/2.png" alt="" />
        <el-form-item label="账号" prop="username" style="width: 300px">
          <el-input v-model="formInline.username" placeholder="admin" />
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 300px">
          <el-input
            show-password
            type="password"
            v-model="formInline.password"
            placeholder="admin"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit(formInline.username, formInline.password)"
            style="width: 100px"
            :loading="juhua"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Login } from "@/Api/YGM/api";
import { promptBialogbox } from "@/Tihsi/tishi";
import { setCookie } from "../Cookies";

const router = useRouter();

const juhua = ref(false);

const formInline = reactive({
  username: "",
  password: "",
});

const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
const formRef = ref(null);

function onSubmit(a, b) {
  juhua.value = true;
  Login(a, b)
    .then((res) => {
      if (res.data.success == false) {
        promptBialogbox("请输入正确的账号密码", "error");
      } else if (res.data.success == true) {
        setCookie(res.data.data.emp.empPhone);
        router.push("/home/body");
      }
    })
    .finally(() => {
      juhua.value = false;
    });
}
</script>
<style scoped>
html,
body {
  height: 0;
}
.bigbox > img {
  width: 100%;
  height: 100vh;
}

.box1 {
  position: absolute;
  top: calc(50% - 300px);
  left: calc(50% - 400px);
  width: 800px;
  height: 600px;
  border-radius: 10px;
  box-shadow: 0 0 10px #666;
  background-color: white;
}
.demo-form-inline {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
img {
  width: 150px;
  margin-bottom: 30px;
}
</style>
